<template>
    <div>
        <Tabcomponent></Tabcomponent>
        <PersonalItem>
            <div class="logistcs">
                <div>物流信息</div>
                <div>
                    <div>
                        <img src="../assets/img/0FB.png" alt="">
                    </div>
                    <div>
                        <div>
                            <span>运单号码：6546512312331</span>
                            <span>物流公司：圆通速递</span>
                            <span>客服电话：95554</span>
                        </div>
                        <div>
                            [发货地址]：<span>四川省成都市高新区信息网国际   阿悄  165****2105</span>
                        </div>
                         <div>
                            [收货地址]：<span>四川省成都市高新区信息网国际   阿悄  165****2105</span>
                        </div>
                    </div>
                </div>
                <div>
                    <div>运输中</div>
                    <div>
                        <p v-for="(item,index) in 5" :key="index">2018-04-05 10:10:00<span>卖家已发货</span></p>
                    </div>
                    <i class="iconfont icon-xiangshang"></i>
                </div>
            </div>
        </PersonalItem>
    </div>
</template>

<script>
import Tabcomponent from '@/components/Tabcomponent.vue'//头部导航
import PersonalItem from "@/components/PersonalItem.vue"
export default {
    components: {
        Tabcomponent,
        PersonalItem
    },
}
</script>

<style lang='scss'> 
.logistcs {
    width: 950px;
    >div:nth-child(1) {
        font-size: 16px;
    }
    >div:nth-child(2) {
        overflow: hidden;
        margin-top: 17px;
        padding: 7px 0 16px 10px;
        border: 1px solid #e5e5e5;
        >div {
            float: left;
        }
        >div:nth-child(1) {
            width: 98px;
            height: 97px;
            >img {
                width: 100%;
                height: 100%;
                vertical-align: top;
            }
        }
        >div:nth-child(2) {
            margin-left: 10px;
            font-size: 16px;
            >div:nth-child(1) {
                >span {
                    margin-right: 40px;
                }
            }
            >div:nth-child(2) {
                margin-top: 8px;
                >span {
                    margin-left: 5px;
                    
                }
            }
            >div:nth-child(3) {
                margin-top: 8px;
                >span {
                    margin-left: 5px;
                    
                }
            }
        }
    }
    >div:nth-child(3) {
        background: #f3f3f3;
        margin-top: 47px;
        padding-bottom: 61px;
        position: relative;
        >div:nth-child(1) {
            font-size: 16px;
            line-height: 55px;
            padding-left: 24px;
            border-bottom: 1px solid #e7e7e7;
        }
        >div:nth-child(2) {
            padding-left: 30px;
            font-size: 14px;
            line-height: 40px;
            span {
                margin-left: 60px;
            }
        }
        >i {
            font-size: 28px;
            color: #f3f3f3;
            position: absolute;
            top: -20px;
            left: 77px;
        }
    }   
}
</style>